<template lang="html">
    <div class="">
        <Headbar />
        <MemberHeadMenu ideName="message" />
        <Hungbar />
        <template>
            <div class="yh-layout-box message-info-box">
            <div id="LeftNavbar-Message" class="LeftNavbar-Message">
                <el-menu default-active="3-1" class="el-menu-vertical-demo"  :collapse="false">
                    <el-menu-item-group title="消息中心">
                        <el-menu-item index="1-1" v-on:click="getMessageType('ORDER');title='订单消息'" :class="{active:activeClass == '1'}"><i>·</i> 订单消息 <span>({{orderCount}})</span></el-menu-item>
                        <el-menu-item index="1-2" v-on:click="getMessageType('SYSTEM');title='系统消息'" :class="{active:activeClass1 == '1'}"><i>·</i> 系统消息 <span>({{systemCount}})</span></el-menu-item>
                    </el-menu-item-group>
                </el-menu>
            </div>
            <div class="setup-content" app="MemberMainMessage" v-if="!isShowXorder">
                    <template>
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>{{title}}</span>
                                <el-button type="text" v-on:click="readMessage()" >全部标记已读</el-button>
                            </div>
                            <div class="setup-content-form">
                                <div class="cursor" v-for="item in data.list" @click="readOneMessage(item.id)">
                                    <div class="setup-content-form-time">
                                        {{item.createAt}}
                                    </div>
                                    <div class="setup-content-form-content">
                                        <div class="header">
                                            <div slot="header" class="clearfix">
                                                <span>{{item.title}}  </span>  <span v-if="!item.isRead" class="isRead"></span>
                                                <el-button type="text" v-on:click="removeMessage(item.id)">×</el-button>
                                            </div>
                                        </div>
                                        <div class="title">
                                            {{item.content}}
                                        </div>
                                        <div class="ftCon-Wrapper">
                                          <span v-if="item.targetType == 'PROTOCOL_INVITE'" @click="isXorderINVITE(item)">
                                            点击了解详情 >
                                          </span>
                                          <span v-if="item.targetType == 'PROTOCOL_ORDER'">
                                            <router-link :to="{name:'XorderDetail', query:{ orderNo: item.detail.orderNo }}">点击了解详情 ></router-link>
                                          </span>
                                          <label  v-else-if="activeClass == '1'">
                                            <router-link :to="{name:'MemberOrderDetail', query:{ orderNo: item.detail.orderNo }}">点击了解详情 ></router-link>
                                          </label>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="order-nodata" v-if="!data.list||data.list.length===0">
                                <img src="@/assets/images/member/notmessage.png" />
                                <p>暂时还没有消息哦~</p>
                            </div>
                            <div class="not-message" v-if="data.pages=== page">
                                没有更多消息了~
                            </div>
                            <pagination v-show="total>0" :total="total" :page.sync="page" :limit.sync="size"  @pagination="getMessageList" />
                        </el-card>
                    </template>
             </div>
             <div class="setup-content xorder-detail" v-else>
               <template>
                   <el-card class="box-card">
                       <div slot="header" class="clearfix">
                           <span>协议订单邀约</span>
                           <span class="fr back-list cursor" @click="isShowXorder = false">返回列表></span>
                       </div>
                       <div class="setup-content-form setup-content-form-xorder">
                         <div class="msgDetail-table">
                           <el-table
                             :data="xorderDetailTable"
                             border
                             style="width: 100%">
                             <el-table-column
                               prop="templateNo"
                               align="center"
                               label="协议订单模板编号">
                             </el-table-column>
                             <el-table-column
                               prop="createTime"
                               align="center"
                               label="发起时间">
                             </el-table-column>
                             <el-table-column
                               prop="amount"
                               align="center"
                               label="订单总金额">
                             </el-table-column>
                             <el-table-column
                                prop="stockupTime"
                                align="center"
                               label="备货时间">
                             </el-table-column>
                             <el-table-column
                              align="center"
                               label="支付方式">
                               <template slot-scope="scope">
                                 <span>{{scope.row.paymentMethods==1?'全额付款':'分期付款'}}</span>
                               </template>
                             </el-table-column>
                             <el-table-column
                              align="center"
                               label="邀约状态">
                               <template slot-scope="scope">
                                 <span class="xorder-value" v-if="scope.row.inviteStatus == 0">待买家处理</span>
                                 <span class="xorder-value" v-if="scope.row.inviteStatus == 1">已接受</span>
                                 <span class="xorder-value" v-if="scope.row.inviteStatus == 2">已忽略（7天后邀约失效）</span>
                                 <span class="xorder-value" v-if="scope.row.inviteStatus == 3">已失效</span>
                               </template>
                             </el-table-column>
                           </el-table>
                         </div>

                         <p class="tcenter xorder-file">

                           <div class="xc-info">
                             <a v-if="judgeFileType(xorderDetail.protocolUrl) == 'isDoc'" :href="URL.downWordFileUrl+URL.File+xorderDetail.protocolUrl" target='_black' class="xc-pic cursor">
                               <img src="@/assets/images/xorder/xc-icon.png">
                               <span>点击查看协议</span>
                             </a>
                             <a v-else-if="judgeFileType(xorderDetail.protocolUrl) == 'isImage' || judgeFileType(xorderDetail.protocolUrl) == 'isPdf'" class="xc-pic cursor" target="_blank"
                              :href="URL.File+xorderDetail.protocolUrl">
                              <img src="@/assets/images/xorder/xc-icon.png">
                              <span>点击查看协议</span>
                              </a>
                             <div class="xc-main">
                               <p>{{ xorderDetail.orderNoContent }}</p>
                               <a v-if="judgeFileType(xorderDetail.protocolUrl) == 'isDoc'" class="xc-down" :href="URL.File+xorderDetail.protocolUrl" target="_blank">下载协议</a>
                               <a v-if="judgeFileType(xorderDetail.protocolUrl) == 'isPdf'" class="xc-down"
                                :href="URL.File+xorderDetail.protocolUrl" target="_blank">下载协议</a>
                               <a v-if="judgeFileType(xorderDetail.protocolUrl) == 'isImage'" target="_blank"
                               :href="URL.File+xorderDetail.protocolUrl" class="xc-down">下载协议</a>
                             </div>
                           </div>

                           <!-- <a class="xorder-file-icon" :href="URL.File+xorderDetail.protocolUrl" target="_blank">
                             <i><img src="@/assets/images/xorder/xc-icon.png"></i>
                             <em>下载协议</em>
                           </a>
                           <span class="xorder-file-text">请下载并打印协议，盖章后扫描上传</span> -->
                         </p>
                       </div>


                       <div class="xorder-btns tcenter" v-if="xorderDetail.inviteStatus == 0">
                         <el-button type="primary" @click="orderProtocolInviteAccept(xorderDetail.id, 1)">接受</el-button>
                         <el-button @click="orderProtocolInviteAccept(xorderDetail.id, 2)" plain>忽略</el-button>
                       </div>
                       <div class="xorder-btns tcenter" v-if="xorderDetail.inviteStatus == 2">
                         <el-button type="primary" @click="orderProtocolInviteAccept(xorderDetail.id, 1)">接受</el-button>
                       </div>
                       <div class="xorder-btns tcenter" v-if="xorderDetail.inviteStatus == 1">
                         <p>{{ xorderDetail.orderNoContent }}</p>
                         <el-button type="primary" @click="routeToPath('/member/xorders/detail?orderNo='+xorderDetail.orderNo)">
                           查看订单详情
                         </el-button>
                         <el-button @click="handleChat" plain>联系卖家</el-button>
                       </div>
                     </el-card>
                 </template>
             </div>
            </div>
        </template>
        <Footbars/>
    </div>
</template>

<script>
    import Headbar from '@/components/Layouts/Headbar';
    import HeadMenu from '@/components/Layouts/HeadMenu';
    import Hungbar from '@/components/Layouts/Hungbar';
    import MemberHeadMenu from './components/MemberHeadMenu';
    import Pagination from '@/components/Pagination';
    import Footbars from '@/components/Layouts/Footbars'
    import {getMessage , removeMessage , readMessage} from '@/api/member';
    import { orderProtocolInvitedetail, orderProtocolInviteAccept } from '@/api/xorder';
    export default {
        name: 'MemberMainMessage',
        components: {
            Headbar,
            HeadMenu,
            Hungbar,
            Pagination,
            Footbars,
            MemberHeadMenu,
        },
        data() {
            return {
                viewHistory:[],
                userInfo:this.getUserInfo(),
                productFavorites:0,
                factoryFavorites:0,
                activeClass:1,
                activeClass1:0,
                data:[],
                systemCount:0,
                orderCount:0,
                page: 1,
                size: 10,
                total: 0,
                messageType:'ORDER',
                title:'订单消息',
                isShowXorder: false,
                xorderDetail: null,
                xorderItem: null,
                xorderDetailTable: [],
                type: this.getUrlParams('type'),
            }
        },
        created(){
          if(this.type && this.type == 'xorder'){
            this.messageType = 'SYSTEM';
            this.getMessageType('SYSTEM')
            this.activeClass1 = 1;
            this.activeClass = 0;
          }
            if(this.userInfo === undefined){
                this.$message.error('请先登录');
                return;
            }
            this.getMessageList();
            this.getMessageCount();
            this.getMessageOrderCount();
        },
        methods:{
          // 联系买家提示
          handleChat() {
            this.$message({
              message: '供应商暂未开启客服功能',
              type: 'warning'
            });
          },
          // 接受邀约、忽略邀约
          orderProtocolInviteAccept(protocolInviteId, inviteStatus) {
            this.$confirm(inviteStatus == 1?'确认后将为您生成订单，请上传盖章协议若有需要调整协议请联系商家进行修改':'确认忽略该协议订单邀约？',
             inviteStatus == 1?'确认同意接受该协议订单邀约？':'提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              orderProtocolInviteAccept({
                protocolInviteId: protocolInviteId,
                inviteStatus: inviteStatus,
                source: 5
              }).then(res=>{
                this.actionsAfter(res.msg, res.code == 200?'success':'error')
                // 接受
                if(inviteStatus == 1){
                  setTimeout(()=>{
                    this.routeToPath('/member/xorders/detail?orderNo='+res.data)
                  }, 1000)
                // 忽略
                }else if(inviteStatus == 2) {
                  // this.reloadPage(1000)
                  this.isXorderINVITE(this.xorderItem)
                }

              })
            })
          },
          // 查看指定邀约
          isXorderINVITE(item){
            this.xorderItem = item;
            orderProtocolInvitedetail({protocolInviteId: item.detail.treatyInviteId }).then(res=>{
              this.xorderDetail = res.data;
              this.xorderDetailTable = []
              this.xorderDetailTable.push(res.data)
              console.log(typeof this.xorderDetailTable)
              this.isShowXorder = true;
            })

          },
            readOneMessage(id){
              readMessage({user:this.userInfo.userId,messages:id}).then(res=>{
                  if(res.code === 200){
                  }
                  this.getMessageList();
              });

            },
            getMessageType(type){
              this.isShowXorder = false;
                if(type === "ORDER"){
                    this.activeClass = 1;
                    this.activeClass1 = 0;
                    this.messageType = type;
                }else{
                    this.activeClass1 = 1;
                    this.activeClass = 0;
                    this.messageType = type;
                }
                this.getMessageList();
            },
            getMessageList(){
                const params = {userId:this.userInfo.userId,type:this.messageType,page:this.page,size:this.size};
                getMessage(params).then(res=>{
                    this.data = res.data;
                    this.total = res.data.total;
                });
            },
            getMessageCount(){
                getMessage({userId:this.userInfo.userId,type:'SYSTEM'}).then(res=>{
                    this.systemCount = res.data.total;
                });
            },
            getMessageOrderCount(){
                getMessage({userId:this.userInfo.userId,type:'ORDER'}).then(res=>{
                    this.orderCount = res.data.total;
                });
            },
            //全部已读
            readMessage(){
                var mids = [];
                var datas = this.data.list;
                datas.forEach(v=>{
                    mids.push(v.id);
                });
                var ids = mids.join(",");
                readMessage({user:this.userInfo.userId,messages:ids}).then(res=>{
                    if(res.code === 200){
                        this.$message({
                            message: '全部已读',
                            type: 'success'
                        });
                    }
                    this.getMessageList();
                });
            },
            removeMessage(messageId){
                this.$confirm('确定删除这条消息吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    removeMessage({user:this.userInfo.userId,messages:messageId}).then(res =>{
                        if(res.code === 200){
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        }
                        this.getMessageList(this.messageType);
                        this.getMessageCount();
                        this.getMessageOrderCount();
                    });
                }).catch(() => {
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .order-nodata{
        padding: 140px 0;
        text-align: center;
        p{
            font-size: 14px;
            color: #888;
            margin-top: 20px;
        }
    }

    .header-info{
        -webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        float: left;
        width: 995px;
        height: 139px;
        margin-left: 20px;
        background-color:#FFF;
        .base-info{
            width: 480px;
            height: 100%;
            .avatar{
                float: left;
                width:80px;
                height:80px;
                border-radius:50%;
                .avatar-img{
                    width:80px;
                    height:80px;
                    border-radius:50%;
                }
                margin: 29px 21px 30px;
            }
            .username{
                margin-top: 43px ;
                span{
                    font-size: 20px;
                    color: rgba(51,51,51,1);
                    img{
                        margin: 0 5px;
                    }
                    .phone{
                        width: 14px;
                        height: 18px;
                    }
                    .wechat{
                        width: 18px;
                        height: 18px;
                    }
                }
            }
            .alter-info{
                margin-top: 15px;
                span{
                    font-size:14px;
                    margin-right: 10px;
                    img{
                        width: 12px;
                        height: 12px;
                        margin: 0 5px;
                    }
                }
            }
            .alter-info{
                font-size:14px;
                font-family:PingFang-SC-Medium;
                font-weight:500;
                color:rgba(136,136,136,1);
            }
        }
        .depart-line{
            width: 20px;
            img{
                width: 20px;
                height:139px;
            }

        }
        .collection-info{
            width: 480px;
            height: 100%;
            .collect-con{
                width: 158px;
                padding: 15px 40px;
                text-align: center;
                margin-top: 20px;
                color: #888;
                .collect-num{
                    color: #255B8B;
                    font-size: 20px;
                }
                p{

                }
            }
            .collection-product{
                border-right: 1px solid #E8E8E8;
            }
        }
    }


    .el-card__header .card-title{
        width: 63px;
        height: 16px;
        font-size: 16px;
        color: rgba(51,51,51,1);
    }

    .my-order .order-box-card{
        float: left;
        width:995px;
        height:216px !important;
        margin-left: 20px;
        margin-top: 20px;
        .text {
            font-size: 14px;
        }
        .order-icon-box{
            padding: 0 60px;
            margin-top: 38px;
            .order-item {
                // margin-bottom: 18px;
                width: 20%;
                float: left;
                text-align: center;
            }
        }
        .order-icon{
            // width: 45px;
            // float: left;

        }


        .order-text{
            width: 45px;
            float: left;
            margin: auto 14px 44px 121px;
            span{
                font-size:14px;
                color:rgba(51,51,51,1);
            }
        }

        .my-order-clearfix:before,
        .my-order-clearfix:after {
            display: table;
            content: "";
        }
        .my-order-clearfix:after {
            clear: both
        }

        .order-box-card {
            width: 980px;
        }
    }

    .my-footprint .footprint-box-card{
        float: left;
        width:995px;
        height:236px;
        margin:19px 0px 39px 20px;

        .text {
            font-size: 14px;
        }

        .footprint-item {
            float: left;
            margin:29px 0px 30px 37px;
            width: 120px;
            height: 120px;
            img{
                width: 120px;
                height: 120px;
            }
        }

        .my-footprint-clearfix:before,
        .my-footprint-clearfix:after {
            display: table;
            content: "";
        }
        .my-footprint-clearfix:after {
            clear: both
        }

        .footprint-box-card {
            width: 980px;
        }
    }

    .setup-content{
        margin-top: 20px;
        padding-left: 200px;
        .el-card__header span{
            font-size:16px;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            color:#333333;
        }

        .el-card__header .el-button--text {
            color: #255B8B;
            font-size:14px;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            float: right;
        }

        .not-message{
            text-align: center;
            color: #888888;
        }

        .setup-content-form{
            .setup-content-form-time{
                width:180px;
                margin: 10px auto;
                height:22px;
                line-height: 22px;
                background:rgba(247,247,247,1);
                font-size:14px;
                font-family:PingFang-SC-Medium;
                font-weight:500;
                color:#333333;
                text-align: center;
            }
            .setup-content-form-content{
                width:920px;
                height:150px;
                background:rgba(243,243,243,1);
                margin: 10px auto;
                margin-bottom: 40px;
                .header{
                    padding: 15px 0px;
                    margin-left: 30px;
                    margin-right: 30px;
                    border-bottom: 1px solid #D3D3D3;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    span{
                        width:47px;
                        height:16px;
                        font-size:16px;
                        font-family:PingFang-SC-Bold;
                        font-weight:bold;
                        color:#333333;
                    }
                    .isRead{
                        border-radius: 50%;
                        background: #D60937;
                        width: 10px;
                        height: 10px;
                        display: inline-block;
                        position: absolute;
                        margin-left: 5px;
                    }
                    .el-button--text{
                        float: right;
                        color: #888888;
                        font-size: 20px;
                        font-weight: 700;
                    }
                }
                .title{
                    margin-top: 15px;
                    margin-left: 30px;
                    margin-right: 30px;
                    font-size:14px;
                    font-family:PingFang-SC-Medium;
                    font-weight:500;
                    color:#666666;
                }
                .ftCon-Wrapper{
                    font-size:14px;
                    font-family:PingFang-SC-Medium;
                    font-weight:500;
                    color:#888888;
                    margin-right: 30px;
                    margin-top: 30px;
                    float: right;
                    label{
                        cursor: pointer;
                    }
                    a{
                        color: #888888;
                        text-decoration: none;
                        &:hover{
                          color: #255B8B;
                        }
                    }
                }
            }
        }
        .setup-content-form-xorder{

          p{
            margin-bottom: 20px;
          }
          .tips{
            color: #333;
            margin-top: 0;
            margin-bottom: 30px;
          }
          .xorder-label{
            width: 48%;
            text-align: right;
            display: inline-block;
            color: #666;
          }
          .xorder-value{
            display: inline-block;
            color: #999;
          }
        }
    }
    .clearfix{
        font-size: 16px;
        line-height: 30px;
        height: 30px;
        flex: 1;
        overflow: hidden;
    }
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 100%;
    }
    .setup-content .el-card__header span.back-list{
      font-size: 14px;
      color: #888;
    }
    .xorder-btns{
      margin-top: 20px;
      p{
        color: #999;
        padding: 20px 0;
        padding-bottom: 10px;
      }
    }
    .xorder-file{
      .xorder-file-icon{
        display: inline-block;
        vertical-align: middle;
        text-decoration: none;
        i{
          display: block;
          margin-bottom: 5px;
        }
        em{
          text-align: center;
          color: #255B8B;
          font-style: normal;
        }
      }
      .xorder-file-text{
        display: inline-block;
        color: red;
        line-height: 90px;
        margin-left: 20px;
      }
    }
</style>


<style lang="scss">
    #LeftNavbar-Message{
        width: 180px;
        .el-menu-vertical-demo:not(.el-menu--collapse) {
            width: 180px;
            min-height: 200px;
        }
        .el-menu-item-group__title {
            padding-left: 30px !important;
            padding-top: 30px;
            width: 200px;
            line-height: normal;
            font-size: 16px;
            color: #333333;
            font-family:PingFang-SC-Heavy;
            font-weight:800;
        }
        .el-menu-item-group .el-menu-item {
            font-size: 14px;
            color: #888888;
            padding-top: 0;
            padding-left: 55px !important;
            height: 40px;
            line-height: 40px;
            cursor: pointer;
            -webkit-transition: border-color .3s,background-color .3s,color .3s;
            transition: border-color .3s,background-color .3s,color .3s;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            i{
                font-size: 30px;
                display: inline-block;
                height: 20px;
                line-height: 15px;
                font-style: normal;
            }
        }
        .el-menu-item.is-active {
            color: #255B8B;
        }
    }

</style>

<style lang='scss' scoped>

    .LeftNavbar-Message {
        width: 180px;
        height: 200px;
        margin-top: -20px;
        background: white;
        float: left;
        border: 1px solid rgba(238, 238, 238, 0.66);
        -webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.06);
        box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.06);
    }
    .LeftNavbar-Message .el-menu-vertical-demo:not(.el-menu--collapse) {
        min-height: 200px;
        width: 180px;
    }
    .LeftNavbar-Message .el-menu-vertical-demo-div {
        width: 100px;
        height: 30px;
        font-size: 14px;
        font-family: Adobe Heiti Std R;
        font-weight: normal;
        color: #888888;
        padding-left: 40px;
        line-height: 30px;
        cursor: pointer;
        span{
            color:#255B8B;
        }
        &.active{
            color:#255B8B;
        }
    }
    .LeftNavbar-Message .el-menu-vertical-demo-div .el-menu-vertical-demo-div:focus, .leftNavbar .el-menu-vertical-demo-div .el-menu-vertical-demo-div:hover {
        color: #255B8B;
    }
    .xc-info{
      border: 1px solid #EEEEEE;
      overflow: hidden;
      margin-bottom: 30px;
      .xc-pic{
        width: 138px;
        height: 141px;
        float: left;
        text-align: center;
        text-decoration: none;
        background-color: #E9EEF3;
        color: #255B8B;
        img{
          vertical-align: middle;
          margin: 22px 40px 20px 40px;
        }
      }
      .xc-main{
        float: left;
        padding: 26px 25px;
        width: 710px;
        p{
          color: #888888;
        }
        .xc-down{
          border: 1px solid #255B8B;
          color: #255B8B;
          padding: 10px 20px;
          border-radius: 6px;
          display: inline-block;
          text-decoration: none;
          transition: all 0.3s;
          cursor: pointer;
          &:hover{
            background: #255B8B;
            color: #fff;
          }
        }
      }
    }
</style>
